import React, { useState, useEffect } from "react"
import "./QuestionDetail.css"
import { connect } from "react-redux"
import instance from "../../utils/instance"
import { getCookie } from "../../utils/cookie"
import Header from "../../component/Header/Header"
import AnswerInput from "../../component/AnswerInput/AnswerInput"
import AnswerDetail from "../../component/AnswerDetail/AnswerDetail"
import Sidebar from "../../template/Sidebar/Sidebar"

function QuestionDetail(props) {
    const [question, setQuestion] = useState({})
    const [answers, setAnswers] = useState([])
    const [putAnswer, setPutAnswer] = useState(false)
    const [attenActive, setAttenActive] = useState(false)
    useEffect(() => {
        let _id = window.location.hash.split("/")[2]
        if (_id) {
            instance.get(`/question/${_id}`).then(data => {
                if (data.data.errno === 0) {
                    let info = data.data.data
                    setQuestion(info)
                }
            })
            instance.get(`/answers/${_id}`).then(data => {
                if (data.data.errno === 0) {
                    let list = data.data.data
                    setAnswers(list)
                }
            })
        }
    }, [])
    useEffect(() => {
        let userId = props.userInfo._id
        if (userId) {
            instance.get(`/users/${userId}/collectingQuestions`).then(data => {
                if (data.data.errno === 0) {
                    let list = data.data.data
                    let flag = list.filter(item => {
                        return item._id === question._id
                    })
                    if (flag.length > 0) {
                        setAttenActive(true)
                    }
                }
            })
        }
    }, [props.userInfo, question])
    const attenQuestion = (e) => {
        let token = getCookie("token")
        instance.defaults.headers.common['Authorization'] = "Bearer " + token
        if (!attenActive) {
            instance.put(`/users/collectingQuestions/${question._id}`).then(data => {
                if (data.data.errno === 0) {
                    setAttenActive(true)
                }
            })
        } else {
            instance.delete(`/users/collectingQuestions/${question._id}`).then(data => {
                if (data.data.errno === 0) {
                    setAttenActive(false)
                }
            })
        }
    }

    return (
        <div className="questionDetaill">
            <div className="question_header">
                <Header />
            </div>
            <div className="question_intro">
                <div className="question_main">
                    <div className="question_topic">
                        <ul>
                            {
                                question.topics ? (question.topics.map(item => {
                                    return (<li key={item._id}>
                                        <p>{item.name}</p>
                                    </li>)
                                })) : ""
                            }
                        </ul>
                    </div>
                    <div className="question_title">
                        <h3>{question.title ? question.title : ""}</h3>
                    </div>
                    <div className="question_descrip">
                        <p>{question.description ? question.description : "暂无关于问题的更多描述..."}</p>
                    </div>
                    <div className="question_more_btn">
                        <ul>
                            <li>
                                <p onClick={(e) => { attenQuestion(e) }}>{!attenActive ? "关注问题" : "取消关注"}</p>
                            </li>
                            <li>
                                <p onClick={(e) => { setPutAnswer(true) }}><span className="iconfont iconbianji"></span>写回答</p>
                            </li>
                            <li>
                                <span><i className="iconfont iconxinxi"></i>{answers.length}人已回答</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className="question_atten">
                    <div>
                        <p>关注者</p>
                        <h3>10</h3>
                    </div>
                </div>
            </div>
            <div className="question_about">
                <div className="question_detail_answer">
                    {
                        putAnswer && (<div className="put_answer">
                            <AnswerInput questionId={question._id} />
                        </div>)
                    }
                    <div className="question_detail_answer_list">
                        <ul>
                            {answers.length > 0 && question._id ? (answers.map(item => {
                                return (
                                    <li key={item._id}>
                                        <AnswerDetail answer={item} questionId={question._id} />
                                    </li>
                                )
                            })) : "尚没有任何的回答，赶紧来试试！"}
                        </ul>
                    </div>
                </div>
                <div className="question_detail_other">
                    <Sidebar />
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.home.userInfo
    }
}

export default connect(mapStateToProps, null)(QuestionDetail)